<!--模板：表示页面视图 html-->
<template>
  <div>
    <h1>{{msg}}</h1>
<!--    使用element-ui按钮-->
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
    <el-input-number style="width: 300px" v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
    <table>
      <tr>
        <td>第1行第1列</td>
        <td>第1行第2列</td>
        <td>第1行第3列</td>
      </tr>
      <tr>
        <td rowspan="2">第2行第1列</td>
        <td>第2行第2列</td>
        <td>第2行第3列</td>
      </tr>
      <tr>
        <td>第3行第2列</td>
        <td>第3行第3列</td>
      </tr>
      <tr>
        <td rowspan="2">第4行第1列</td>
        <td>第4行第2列</td>
        <td>第4行第3列</td>
      </tr>
      <tr>
        <td>红烧肉<img src="@/assets/2.png"></td>
        <td>第5行第3列</td>
      </tr>
    </table>
  </div>
</template>

<!--定义数据和相关操作，组件核心-->
<script>
export default {
  name:"lmy",
  data() {
    return {
      msg:"Welcome to lmy!",
      num:1
    }
  },
  methods:{
    handleChange(value) {
      //这里可以得到用户增加/减少的值
      console.log(value);
    }
  }
}
</script>

<!--样式，css，可以修饰页面视图-->
<style scoped>
div {
  width: 900px;
  background-color: aliceblue;
  margin: 0 auto;
}
h1 {
  color: red;
}
table, tr, td{
  border: 1px solid red;
  width: 600px;
  height:50px;
  border-collapse: collapse;
  margin: 0 auto;
}
</style>
